<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="res/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="res/css/main.css">
<link rel="stylesheet" href="res/css/index.css">
<title>运动员报名</title>

<style>
	.all{
		width:100%;
		margin-top:10px;
		height:30px;
		background-color:#6699ff;
	}
	.lower{
		width:100%;
		background-color:#f2f2f2;
	}
	.title{
		text-align:center;
		font-size:24px;
		background-color:#f0f0f5;
	}
	.left{
		float:left;
		text-align:center;
	}
	.right{
		float:right;
		color:#ccd9ff;
	}
</style>

</head>
<body>
		
	<!-- 导入导航栏 -->
	<div class="layui-container" style="width:100%">
	  	<%@ include file="header.jsp" %> 
  	</div>
  	<!-- 中间部分 -->
  	<div class="layui-container all"></div>
	  <div class="layui-container lower">
		    <div class="layui-row layui-col-space12">
				<div class="layui-card layui-col-space8" style="margin:0 auto;width:85%;">
					<div class="title">校运动会比赛报名</div>
			   		<div class="layui-card-bodya">
						 <table id="test" lay-filter="test" style="width:100%;"></table>
					</div>
			   	</div>
			</div>
		</div>
	
  	<!-- footer部分 -->
	<div class="layui-container" style="width:100%;margin-top:10px;">
	  	<%@ include file="footer.jsp" %> 
  	</div>
<script src="res/layui/layui.js"></script>
<c:if test="${loginuser == null}">
	<script type="text/html" id="barDemo">
  		<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger"><a href='login.jsp'>登录报名</a></button>
	</script>
</c:if>
<c:if test="${loginuser != null}">
	<script type="text/html" id="barDemo">
		{{#if (d.note == 0) { }}
         <a class="layui-btn layui-btn-xs" lay-event="addsignup">报名</a>
        {{# }else if(d.note == 1){ }}
  		<button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger">已报名</button>
        {{# }else{ }}
       <span>- </span>
        {{# } }}
	</script>
</c:if>
</body>
<script>
layui.use(['table','jquery'], function(){
  var table = layui.table;
  var $ = layui.jquery;
  
 
  //第一个实例
  table.render({
    elem: '#test'
    ,even:true
    ,skin:'line'
    ,id:'tabledata'
    ,url: 'signup.action' //数据接口
    ,page: true //是否显示分页
     ,limits: [50,100,150]
     ,limit: 50 //每页默认显示的数量
     ,loading: true //请求数据时，是否显示loading
    ,cols: [[ //表头
      {field: 'projectid', title: '项目编号',hide:true}
      ,{field: 'projectname', title: '项目名',width:110}
      ,{field: 'itemcategory', title: '项目类别',width:120,templet:function(d){
	    		 return d.itemcategory == "1" ? "个人赛" : "集体赛"}}
      ,{field: 'agendtype', title: '项目组别',width:120,templet:function(d){
	    		 return d.agendtype == "1" ? "学生组" : "教职工组"}}
      ,{field: 'staretime', title: '报名开始时间',align:'center',width:200}
      ,{field: 'endtime', title: '报名结束时间',align:'center',width:200}
      ,{field: 'surplusquota', title: '剩余名额',align:'center'}
      ,{field: 'note', title: '备注',align:'center',hide:true}
	  ,{fixed: 'right', title:'操作',align:'center',width:100, toolbar: '#barDemo'}
    ]]
    ,done: function(res){
    	var tableContent = new Array();
    	tableContent = res.data;
	    //console.log(tableContent);
	    //console.log(res);
     }
  });


  		//监听工具条
		table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
		  var data = obj.data; //获得当前行数据
		  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
		  var tr = obj.tr; //获得当前行 tr 的DOM对象
			if(layEvent === 'addsignup'){ //添加报名
				if(data.surplusquota <= 0){
					layer.msg("无剩余名额！",{icon:5});
					return;
				}else{
					 layer.confirm('确定报名吗？', function(index){
					 	//alert(data.projectid);
					 	 layer.close(index);//删除弹出框
						 //提交 Ajax 成功后，关闭当前弹层并重载表格
					      $.post("AddSignupInfo.action",{projectid:data.projectid},function(flag){
					      		if(flag){
					      			layer.msg("报名成功",{icon: 6});
					      			location.reload();//刷新页面
					      		}else{
					      			layer.msg("报名失败",{icon: 6});
					      		}
					      })
					 });
				
				}
			}
		});
  })

</script>
</html>